<template>
  <v-container fluid>
    <v-row justify="start">
      <v-col cols="12">
        <v-breadcrumbs :items="items"></v-breadcrumbs>
      </v-col>
      <v-col cols="12">
        <v-timeline align-top dense>
          <v-timeline-item
            v-for="(value, index) in timelines"
            :color="index % 2 === 0 ? 'pink' : 'teal lighten-3'"
            :key="index"
            small
          >
            <v-row class="pt-1">
              <v-col cols="3">
                <strong>{{ value.time }}</strong>
              </v-col>
              <v-col>
                <strong>{{ value.title }}</strong>
                <div class="caption">
                  {{ value.subtitle }}
                  <p>{{ value.text }}</p>
                </div>
              </v-col>
            </v-row>
          </v-timeline-item>
        </v-timeline>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
export default {
  name: "TimeLine",
  data() {
    return {
      items: [
        {
          text: "首页",
          disabled: false,
          exact: true,
          to: { name: "Home" },
        },
        {
          text: "时间线",
          disabled: true,
          exact: true,
          to: { name: "TimeLine" },
        },
      ],
      timelines: [
        {
          time: "2020/7/27",
          title: "上传功能",
          subtitle: "完善前端功能",
          text: "完善前端功能，使用mock模拟数据，修复刷新页面后无法播放的bug",
        },
        {
          time: "2020/7/23",
          title: "录音功能",
          subtitle: "RecordRTC在线录音",
          text:
            "使用RecordRTC在线录音，保存文件格式为mp3，临时存储在sessionstorage中，关闭页面或点击上传时上传内容",
        },
      ],
    };
  },
};
</script>